<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">组织机构</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :api="getOrgTree" :show-code="showCode" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ dptName }}</div>
        </div>
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="人员列表"
            rowKey="empid"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :select="_select"
            :click-row="_clickRow"
            :all-select-disabled="true"
            :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
            :small="true"
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
              <el-button-group>
                <el-button type="primary" text :icon="Pointer" :disabled="curRow.empid && curRow.bcard" @click="_showDialog(1)"
                  >发卡</el-button
                >
                <el-button
                  type="primary"
                  text
                  :icon="Connection"
                  :disabled="curRow.empid && !curRow.bcard"
                  @click="_showDialog(2)"
                  >换卡</el-button
                >
                <el-button
                  type="primary"
                  text
                  :icon="Finished"
                  :disabled="curRow.empid && (curRow.bactive || !curRow.bcard)"
                  @click="_showDialog(3)"
                  >激活</el-button
                >
              </el-button-group>
              <el-button-group>
                <el-button type="primary" text :icon="Cellphone" @click="_showPrintDialog">指纹</el-button>
                <!-- <el-button type="primary" text :icon="Camera" @click="_changeCard">人脸</el-button> -->
                <el-button
                  type="primary"
                  text
                  :icon="CreditCard"
                  :disabled="curRow.empid && !curRow.bcard"
                  @click="dialogVisible1 = true"
                  >读卡查询</el-button
                >
              </el-button-group>
              <!-- <el-button-group>
                <el-button type="warning" text :icon="Lock" @click="_batchLock(scope.selectedListIds)">挂失</el-button>
                <el-button type="warning" text :icon="Unlock" @click="_batchUnLock(scope.selectedListIds)">解挂</el-button>
              </el-button-group> -->
            </template>
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-button
                type="primary"
                link
                :icon="Lock"
                :disabled="!scope.row.bcard || scope.row.block"
                @click="_lockCard(scope.row)"
                >挂失</el-button
              >
              <el-button
                type="primary"
                link
                :icon="Unlock"
                :disabled="!scope.row.bcard || !scope.row.block"
                @click="_unlockCard(scope.row)"
                >解挂</el-button
              >
            </template>
          </ProTable>
        </div>
      </div>
      <CardHandleDialog
        :cur-row="curRow"
        :handle-type="handleType"
        :dialog-visible="dialogVisible"
        :handle-close="handleClose"
        @write-card-suc="writeCardSuc"
      />
      <CardReadingDilalog :dialog-visible="dialogVisible1" :handle-close="handleClose" @read-card-cb="readCardCb" />
      <PrintHandleDialog :cur-row="curRow" :dialog-visible="dialogVisible2" :handle-close="handleClose" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="virtualCardManage">
/* eslint-disable */
// @ts-nocheck
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { CreditCard, Lock, Unlock, Pointer, Connection, Finished, Cellphone, Camera } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import CardHandleDialog from "./components/CardHandleDialog.vue";
import CardReadingDilalog from "./components/CardReadingDilalog.vue";
import PrintHandleDialog from "./components/PrintHandleDialog.vue";
import { getOrgTree } from "@/api/modules/common";
import { getEmployeeList, lockCard, unlockCard } from "@/api/modules/cardIssuingCenter/employeeManage";
import { bcardType } from "@/utils/serviceDict";

const treeId = ref("tree");
const showCode = ref(false);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
const loading = ref(false);
const proTable = ref();
const dptid = ref("");
const dptName = ref("");
const cardUid = ref("");
const avatar = ref("");
const handleType: any = ref(1);
const curRow = ref({});
const orgUnitIDs = ref([]);

const dataCallback = (data: any) => {
  let { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getEmployeeList({ ...newParams, orgUnitIDs: orgUnitIDs.value });
};

const columns = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "clause",
    label: "姓名",
    isShow: false,
    search: { el: "input" },
    width: 120
  },
  {
    prop: "bcard",
    label: "是否发卡",
    isShow: false,
    enum: bcardType,
    search: { el: "select" },
    width: 120
  },

  {
    prop: "empcode",
    label: "编号",
    minWidth: 200
  },
  {
    prop: "empname",
    label: "姓名",
    minWidth: 120
  },

  {
    prop: "cardType",
    label: "部门",
    minWidth: 200
  },
  {
    prop: "cardvalid",
    label: "卡有效期",
    minWidth: 200
  },
  {
    prop: "rulevalid",
    label: "门禁有效期",
    minWidth: 200
  },

  {
    prop: "bcard",
    label: "发卡",
    minWidth: 120,
    render: scope => {
      return (
        <>
          <el-checkbox disabled v-model={scope.row.bcard}></el-checkbox>
        </>
      );
    }
  },
  {
    prop: "bactive",
    label: "激活",
    minWidth: 120,
    render: scope => {
      return (
        <>
          <el-checkbox disabled v-model={scope.row.bactive}></el-checkbox>
        </>
      );
    }
  },
  {
    prop: "block",
    label: "挂失",
    minWidth: 120,

    render: scope => {
      return (
        <>
          <el-checkbox disabled v-model={scope.row.block}></el-checkbox>
        </>
      );
    }
  },
  { prop: "operation", label: "操作", fixed: "right", minWidth: 180 }
];

/**
 * 多选框选择
 */
const _select = (selection, row) => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.empid === row.empid);
  const lastSelItem = selection.shift();
  if (selection.length) {
    proTable.value.element.toggleRowSelection(lastSelItem, false);
  }
  curRow.value = isSel ? row : {};
  cardUid.value = isSel ? row.uid : "";
};

/**
 * 单击行
 */
const _clickRow = row => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.empid === row.empid);
  proTable.value.clearSelection();
  proTable.value.element.toggleRowSelection(row, isSel ? false : true);
  curRow.value = !isSel ? row : {};
  cardUid.value = !isSel ? row.uid : "";
};

/**
 * 显示操作卡片弹窗
 */
const _showDialog = (val: number) => {
  handleType.value = val;
  if (JSON.stringify(curRow.value) === "{}") {
    ElMessage.error("请选择人员");
    return false;
  }
  dialogVisible.value = true;
};

const _showPrintDialog = () => {
  if (JSON.stringify(curRow.value) === "{}") {
    ElMessage.error("请选择人员");
    return false;
  }
  dialogVisible2.value = true;
};

/**
 * 挂失卡片
 */
const _lockCard = async params => {
  await useHandleData(lockCard, { list: [params.empid] }, `挂失【${params.empname}】卡片`);
  proTable.value.getTableList();
};

/**
 * 解挂卡片
 */
const _unlockCard = async params => {
  await useHandleData(unlockCard, { list: [params.empid] }, `解挂【${params.empname}】卡片`);
  proTable.value.getTableList();
};

/**
 * 读卡查询回调
 */
const readCardCb = list => {
  proTable.value.tableData = list;
};

/**
 * 点击树节点
 */
const zTreeOnClick = ({ treeNode, ids }) => {
  dptid.value = treeNode.id;
  dptName.value = treeNode.name;
  orgUnitIDs.value = ids;
  loading.value = true;
  proTable.value.clearSelection();
  proTable.value.getTableList();
};

/**
 * 关闭提示框
 */
const handleClose = () => {
  dialogVisible.value = false;
  dialogVisible1.value = false;
  dialogVisible2.value = false;
};

/**
 * 写卡成功
 */
const writeCardSuc = () => {
  handleClose();
  proTable.value.clearSelection();
  proTable.value.getTableList();
};

/**
 * 源代码逻辑
 */
// function isWritecard(curEtag) {
//   const { tagid, readdeep } = curEtag;

//   switch (tagid) {
//     case 1:
//       if (readdeep == 0) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 2:
//       if (readdeep == 0) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 3:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 4:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 5:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 6:
//       if (readdeep == 0) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 7:
//       if (readdeep == 0) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 8:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 9:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 10:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 11:
//       if (readdeep == 1) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 12:
//       if (readdeep == 13) {
//         return false;
//       } else {
//         return true;
//       }
//       break;
//     case 13:
//       return false;
//       break;
//     default:
//       return true;
//   }
// }
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
